<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" href="../css/style_12_forum_index.css">
    <link rel="shortcut icon" href="/favicon.ico">
</head>
<head>
    <!-- 必要的标签 -->
    <title>Welcome to my Sakura BBS!</title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/bootstrap-theme.min.css">
    <script src="../../static/../js/bootstrap.min.js" type="application/javascript"></script>
    <meta http-equiv="content-language" content="ja">

    <link type="text/css" rel="stylesheet" href="../css/style_12_common.css">

    <meta  name = “_csrf” content = “${_csrf.token}” />
    <meta  name = “_csrf_header”  content = “${_csrf.headerName}” />

    <meta name="description" content="『サクラノ刻 -櫻の森の下を歩む- 』ティザーサイト">
    <meta name="keywords" content="サクラノ刻,サクラノ詩,サクラノ刻 -櫻の森の下を歩む-,枕,makura">
    <meta property="og:type" content="website">
    <meta property="og:title" content="サクラノ刻">
    <meta property="og:image" content="http://www.makura-soft.com/sakuranotoki/common/img/og_img3.jpg">
    <meta property="og:description" content="『サクラノ刻 -櫻の森の下を歩む- 』ティザーサイト">
    <link rel="icon" href="favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="img/favicon_apple.jpg">
    <link rel="stylesheet" href="../css/ress.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&amp;display=swap" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="../css/common.css">
    <link type="text/css" rel="stylesheet" href="../css/slick.css">
    <link type="text/css" rel="stylesheet" href="../css/slick-theme.css">
    <link type="text/css" rel="stylesheet" href="../css/colorbox.css">
    <link type="text/css" rel="stylesheet" href="../css/colorbox_custom.css">
    <link type="text/css" rel="stylesheet" href="../css/prologue.css">
    <link type="text/css" rel="stylesheet" href="../css/sakutoki.css">
    <link type="text/css" rel="stylesheet" href="../css/character.css">
    <link type="text/css" rel="stylesheet" href="../css/gallery.css">
    <link type="text/css" rel="stylesheet" href="../css/responsive.css">
    <link type="text/css" rel="stylesheet" href="../css/smart.css">
    <link href="../css/all.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery-ui.js"></script>
    <script src="../js/all.js"></script>
    <script src="../js/prologue.js"></script>
    <script src="../js/slick.min.js"></script>
    <script src="../js/slick_option.js"></script>
    <script src="../js/header.js"></script>
    <script src="../js/jquery.colorbox.js"></script>
    <script src="../js/colorbox_option.js"></script>
    <script src="../js/top.js"></script>
    <script src="../js/pagetop.js"></script>
    <script src="../js/noscroll.js"></script>
    <script src="../js/character.js"></script>
    <script src="../js/gallery.js"></script>
    <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-99248877-2', 'auto');
        ga('send', 'pageview');
    </script>
    <script>
        (function(d) {
            var config = {
                    kitId: 'jqx4grp',
                    scriptTimeout: 3000,
                    async: true
                },
                h = d.documentElement,
                t = setTimeout(function() {
                    h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
                }, config.scriptTimeout),
                tk = d.createElement("script"),
                f = false,
                s = d.getElementsByTagName("script")[0],
                a;
            h.className += " wf-loading";
            tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
            tk.async = true;
            tk.onload = tk.onreadystatechange = function() {
                a = this.readyState;
                if (f || a && a != "complete" && a != "loaded") return;
                f = true;
                clearTimeout(t);
                try {
                    Typekit.load(config)
                } catch (e) {}
            };
            s.parentNode.insertBefore(tk, s)
        })(document);
    </script>
    <!-- Bootstrap CSS -->
</head>

<body>

<nav >
    <div id="common_header">

        <div id="pc_globalmenu_area">
            <header>
                <div class="bottom_globalmenu">
                    <ul id="globalmenu">
                        <li class="header_logo">
                            <div><a th:href="@{/userAccounts/info}"><img src="../img/makura_logo.png"></a></div>
                        </li>
                        <li class="header_menu">
                            <div class="header_li"><a th:href="@{/}"><img src="../img/1.png" alt="TOP"></a>
                                <div id="top_hover" class="op0"><img src="../img/2_line.png"></div>
                            </div>
                            <div class="header_li"><a th:href="@{/type}"><img src="../img/5.png" alt="STORY"></a>
                                <div id="story_hover" class="op0"><img src="../img/2_line.png"></div>
                            </div>
                            <div class="header_li"><a th:href="@{/tasks}"><img src="../img/2.png" alt="CHARACTER"></a>
                                <div id="character_hover" class="op0"><img src="../img/2_line.png"></div>
                            </div>
                            <div class="header_li"><a th:href="@{/userAccounts}"><img src="../img/3.png" alt="GALLERY"></a>
                                <div id="gallery_hover" class="op0"><img src="../img/2_line.png"></div>
                            </div>
                            <div class="header_li"><a href="#special_area"><img src="../img/4.png" alt="SPECIAL"></a>
                                <div id="special_hover" class="op0"><img src="../img/2_line.png"></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </header>
        </div>
        <!-- //pc_globalmenu_area-->

        <div id="smart_globalmenu_area">
            <div class="list_btn smart"><span></span><span></span><span></span></div>
            <div class="globalmenu">
                <div class="relative_area">
                    <div class="header_logo_sp"><a th:href="@{/}"><img src="../img/makura_logo.png"></a></div>
                    <div class="menu_sp"><a th:href="@{/}"><img src="../img/1.png" alt="TOP"></a></div>
                    <div class="menu_sp"><a th:href="@{/type}"><img src="../img/5.png" alt="STORY"></a></div>
                    <div class="menu_sp"><a th:href="@{/tasks}"><img src="../img/2.png" alt="CHARACTER"></a></div>
                    <div class="menu_sp"><a th:href="@{/userAccounts}"><img src="../img/3.png" alt="GALLERY"></a></div>
                    <div class="menu_sp"><a href="#special_area"><img src="../img/4.png" alt="SPECIAL"></a></div>
                    <div class="twitter_share_sp">
                        <a href="https://twitter.com/intent/tweet?ref_src=twsrc%5Etfw&amp;text=サクラノ刻ティザーサイト&amp;tw_p=tweetbutton&amp;url=https://www.makura-soft.com/sakuranotoki/" data-text="" data-show-count="false" target="_blank"><img src="../img/share_btn.png" alt="SHARE"><img src="../img/twitter_share.png"></a>
                        <script async="" src="js/widgets.js" charset="utf-8"></script>
                    </div>
                </div>
            </div>
        </div>


    </div>
</nav>

<div id="mainvisual_area">
    <!-- <img class="tablet pc" src="../img/tablet_mainVisual.jpg" width="100%" alt="mainVisual"> -->
    <img class="pc" src="../img/mainVisual.jpeg" style="width: 1280px;height: auto;" alt="mainVisual">
    <div class="smart">
        <img src="../img/mainVisual.jpeg" alt="mainVisual">
    </div>
    <!-- top -->
    <div id="top_bg">
        <div class="boundary"><img src="../img/gradation.png"></div>

        <div class="flex_area area">
            <div id="news_area" class="half_area">
                <div class="news_logo">
                    <img src="../img/news_head.png" alt="NEWS">
                    <div class="sakura1"><img src="../img/sakura1.png"></div>
                </div>
                <ul class="news">

                    <div class="fl bm" style="background-color:rgba(255,255,255,0.0);">
                        <div class="bm bmw  flg cl" style="background-color:rgba(255,255,255,0.0);">

                            <div class="bm_h cl" style="background-color:rgba(255,255,255,0.1);">
                                <h2>
                                    公告栏
                                </h2>
                                <a th:href="@{/comments}"><img style="float: right;width: auto;height: 25px" id="category_img" src="../picture/all.png"></a>
                            </div>

                            <div id='laba' style="background-color:rgba(255,255,255,0.1);">
                                <div style='width:99%;padding:0.5%;height: 205px;'>

                                    <table style='width:100%'>

                                        <tr style="height:30px;border-bottom:1px dashed #CCCCCC;" th:each="aComment : ${comments}">
                                            <td style="width:55px;" valign="absmiddle">
                                                <div style="margin-top:6px;">
                                                    <span style="border-radius:5px;background:#00a610;padding:3px;padding-left:10px;padding-right:10px;color:#FFFFFF;margin:3px;font-size:12px;">
                                                        全站
                                                    </span>
                                                </div>
                                            </td>
                                            <td style="width:26px;" width="*" valign="absmiddle">
                                                <style>
                                                    .faceimg img {
                                                        margin-top: 2px;
                                                        width: 20px;
                                                        height: 20px;
                                                        border: 2px solid #FFFFFF;
                                                        box-shadow: 1px 1px 1px #CCCCCC;
                                                    }
                                                </style>
                                                <div class="faceimg">
                                                    <img src="../picture/avatar-4_small.jpg">
                                                </div>
                                            </td>
                                            <td width="*" valign="absmiddle">
                                                <div style="width:100%;line-height:20px;padding-top:3px;">
                                                    <a href="javascript:" target="_blank">
                                                        <b th:text="${aComment.commenter}"></b>
                                                    </a>
                                                    说:
                                                    <span th:title="${aComment.comment_info}" style="">
                                                        <a th:text="${aComment.comment_info}"></a>
                                                    </span>
                                                </div>
                                            </td>
                                            <td style="width:150px;text-align:right;" valign="top">
                                                <div style="margin-top:6px;">
                                                    <a th:text="${aComment.comment_time}"></a>
                                                </div>
                                            </td>
                                            <td style="width:10px;" valign="top">
                                                <div style="margin-top:6px;">
                                                </div>
                                            </td>
                                        </tr>

                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>

                </ul>
            </div>

            <div class="half_area">
                <div id="youtube_area" class="pc">
                    <a><img src="../img/comingsoon.png"></a>
                    <div class="sakura2"><img src="../img/sakura2.png"></div>

                </div>
                <div id="sakuranouta_area" class="op0">
                    <a th:href="@{/types}"><img src="../img/comingsoon.png"></a>
                </div>
            </div>
        </div>
        <!--//flex_area-->

        <div id="slide_area" class="area">
            <ul class="topSlide">
                <li>
                    <div>
                        <img src="../img/coming_soon.png" alt="ComingSoon">
                        <!--                    <a href="#" class="pc"><img class="topSlide_on" src="../img/comingsoon.png" onmouseover="this.src='../img/special/trial1.jpg'" onmouseout="this.src='../img/special/trial2.jpg'" alt=""></a>-->
                        <!--                    <a href="#" class="smart"><img class="topSlide_on op0" src="../img/comingsoon.png" alt=""></a>-->
                    </div>
                </li>
                <li>
                    <div>
                        <img src="../img/coming_soon.png" alt="ComingSoon">
                        <!--                    <a href="#" target="_blank" class="pc"><img class="topSlide_on" src="../img/comingsoon.png" onmouseover="this.src='../img/special/pre_play1.jpg'" onmouseout="this.src='../img/special/pre_play2.jpg'" alt=""></a>-->
                        <!--                    <a href="#" target="_blank" class="smart"><img class="topSlide_on op0" src="../img/comingsoon.png" alt=""></a>-->
                    </div>
                </li>
                <li>
                    <div>
                        <img src="../img/coming_soon.png" alt="ComingSoon">
                        <!--                    <a href="#" target="_blank" class="pc"><img class="topSlide_on" src="../img/comingsoon.png" onmouseover="this.src='../img/special/shop1.jpg'" onmouseout="this.src='../img/special/shop2.jpg'" alt=""></a>-->
                        <!--                    <a href="#" target="_blank" class="smart"><img class="topSlide_on op0" src="../img/comingsoon.png" alt=""></a>-->
                    </div>
                </li>
                <li>
                    <div>
                        <img src="../img/coming_soon.png" alt="ComingSoon">
                    </div>
                </li>
            </ul>
            <div class="sakura3 pc"><img src="../img/sakura3.png"></div>
        </div>
    </div>
    <!-- //top -->

    <!-- story -->
    <div id="story_bg">
        <div class="boundary"><img src="../img/boundary.png"></div>
        <div id="story_area" class="area">
            <div class="story_logo pc"><img src="../img/story_logo.png" alt="STORY"></div>


            <div class="story_logo smart op0"><img src="../img/story_logo.png" alt="STORY"></div>

            <div class="contents">
                <div class="dots pc op0"></div>

                <div class="story_slide2 pc op0">
                    <div class="story_img" data-thumb="../img/story/1.png"><img src="../img/story_1.png" alt="第一章">
                    </div>
                    <div class="story_img" data-thumb="../img/story/2.png"><img src="../img/story_2.png" alt="第二章">
                    </div>
                    <div class="story_img" data-thumb="../img/story/3-1.png"><img src="../img/story_3-1.png" alt="第三章1">
                    </div>
                    <div class="story_img" data-thumb="../img/story/3-2.png"><img src="../img/story_3-2.png" alt="第三章2">
                    </div>
                    <div class="story_img" data-thumb="../img/story/3-3.png"><img src="../img/story_3-3.png" alt="第三章3">
                    </div>
                    <div class="story_img" data-thumb="../img/story/4.png"><img src="../img/story_4.png" alt="第四章">
                    </div>
                    <div class="story_img" data-thumb="../img/story/5.png"><img src="../img/story_5.png" alt="第五章">
                    </div>
                </div>

                <div class="dots_sp smart op0"></div>

                <div class="story_slide3 smart op0">
                    <div class="story_img" data-thumb="../img/story/1.png"><img src="../img/story_1_sp.png" alt="第一章">
                    </div>
                    <div class="story_img" data-thumb="../img/story/2.png"><img src="../img/story_2_sp.png" alt="第二章">
                    </div>
                    <div class="story_img" data-thumb="../img/story/3-1.png"><img src="../img/story_3-1_sp.png"
                                                                                  alt="第三章1"></div>
                    <div class="story_img" data-thumb="../img/story/3-2.png"><img src="../img/story_3-2_sp.png"
                                                                                  alt="第三章2"></div>
                    <div class="story_img" data-thumb="../img/story/3-3.png"><img src="../img/story_3-3_sp.png"
                                                                                  alt="第三章3"></div>
                    <div class="story_img" data-thumb="../img/story/4.png"><img src="../img/story_4_sp.png" alt="第四章">
                    </div>
                    <div class="story_img" data-thumb="../img/story/5.png"><img src="../img/story_5_sp.png" alt="第五章">
                    </div>
                </div>

            </div>
            <div class="feather pc"><img src="../img/feather.png"></div>
        </div>
    </div>
    <!-- //story -->

    <!-- character -->
    <div id="character_area">
        <div class="boundary"><img src="img/boundary_1.png"></div>
        <div class="area">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>


    <!-- others -->
    <div id="otherSlide_area">
        <div class="boundary boundary_other"><img src="img/boundary_2.png"></div>
        <div class="boundary boundary_gallery"><img src="img/boundary_3.png"></div>
    </div>
    <!-- //character -->

    <!-- gallery -->
    <div id="gallery_area">
        <div class="area">
            <div class="gallery_logo op0"><img src="img/gallery_head.png" alt="GALLERY"></div>
            <div class="contents">
                <div class="main_gallery_area">
                    <div class="container">

                        <table class="table table-bordered table-striped">
                            <thead class="thead-dark">
                            <tr>
                                <th>任务名称</th>
                                <th>任务状态</th>
                                <th>参与人数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="aTask : ${taskUserAccounts}">
                                <td th:text="${aTask.task_name}"></td>
                                <td th:text="${aTask.task_stage}"></td>
                                <td th:text="${aTask.userAccountCount}"></td>
                            </tr>
                            </tbody>
                        </table>

                        <h4>当前已注册用户</h4>
                        <table class="table table-bordered table-striped">
                            <thead class="thead-dark">
                            <tr>
                                <th>用户名称</th>
                                <th>用户邮箱</th>
                                <th>用户推特ID</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="aUserAccount : ${userAccounts}">
                                <td th:text="${aUserAccount.username}"></td>
                                <td th:text="${aUserAccount.email}"></td>
                                <td th:text="${aUserAccount.twitter_id}"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div id="gallery_pos0" class="main_gallery_box0 op0">

                    </div>

                    <div id="gallery_pos1" class="main_gallery_box1 op0">

                    </div>

                    <div id="gallery_pos2" class="main_gallery_box0 op0">

                    </div>

                    <div id="gallery_pos3" class="main_gallery_box0 op0">

                    </div>

                    <div id="gallery_pos4" class="main_gallery_box1 op0">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- //gallery -->


    <!-- special -->
    <div id="special_bg">
        <div class="boundary"><img src="../img/boundary_4.png"></div>
        <div id="special_area" class="area">

            <div class="special_logo op0"><img src="../img/special_logo.png" alt="SPECIAL"></div>

            <div class="contents">
                <ul class="special_list op0">
                    <li class="special_on pc"><a href="#"><img src="../img/comingsoon.png" alt="ComingSoon"></a></li>
                    <li class="special_on smart"><a href="#"><img src="../img/comingsoon.png" alt="ComingSoon"></a></li>
                    <li class="special_on pc"><a href="#"><img src="../img/comingsoon.png" alt="ComingSoon"></a></li>
                    <li class="special_on smart"><a href="#"><img src="../img/comingsoon.png" alt="ComingSoon"></a></li>
                    <li class="special_on pc"><a href="#"><img src="../img/comingsoon.png" alt="ComingSoon"></a></li>
                    <li class="special_on smart"><a href="#"><img src="../img/comingsoon.png" alt="ComingSoon"></a></li>
                    <li class="pc"><img src="../img/coming_soon.png" alt="ComingSoon"></li>
                    <li class="pc"><img src="../img/coming_soon.png" alt="ComingSoon"></li>
                    <li class="pc"><img src="../img/coming_soon.png" alt="ComingSoon"></li>
                </ul>
            </div>
        </div>
        <div class="footer_boundary"><img src="../img/boundary_5.png"></div>
    </div>
    <!-- //special -->

    <!-- footer -->
    <footer>
        <div class="logo_area">
            <div class="flex_area">
                <span></span>
                <a href=""><img src="../img/coming_soon.png" alt=""></a>
                <a href="" target="_blank"><img src="../img/coming_soon.png" alt=""></a>
                <span></span>
            </div>
            <div class="flex_area">
                <a href="" target="_blank"><img src="../img/twitter.png" alt="twitter"></a>
                <a href="" target="_blank"><img src="../img/youtube.png" alt="youtube"></a>
            </div>
        </div>
        <div class="copyright">@SAKURA BBS &nbsp;&nbsp; Ver <a th:text="${versionNumber}"></a></div>
    </footer>
    <div id="pagetop"><a href="#mainvisual_area"><img src="../img/pagetop.png" alt="TOP"></a></div>
    <script>
        $("#pagetop").click(function () {
            $("body,html").animate({
                scrollTop: 0
            }, 800);
        });
    </script>
</div>
</body>

</html>
